<template>
	<view class="index" v-if="isload" :style="'background-color: #'+bgColor+';'">
		<image src="../../static/image.png" mode="widthFix" class="img"></image>
		<!-- <image :src="testimg" mode="widthFix" class="img"></image> -->
		<view :style="'background-color: #'+bgColor+';'">
			<!-- 输入信息查询题 -->
			<view class="card" v-if="testtype == 'input'">
				<view class="title">{{title}}</view>
				<view class="testdec">{{subject}}</view>
				<input type="text" :placeholder="inputpLaceholderA" v-model="myname" />
				<input type="text" :placeholder="inputpLaceholderB" v-model="hername" v-if="boxesNumber=='2'" />
				<button style="background-color:  #c4f0ff;" @click="testName">立即查询</button>
			</view>
			<!-- 普通选择题 -->
			<view class="noinput card" v-if="testtype=='choice'">
				<view class="title">{{title}}</view>
				<view class="testdec">{{subject}}</view>
				<view class="option" v-for="(item,index) in option" :key="index" @click="select(index)">
					<view :class="(selectindex==index)?'order':'norder'">{{index+1}}</view>
					<text>{{item}}</text>
				</view>
				<button style="background-color:  #c4f0ff; margin-top: 80rpx;" @click="getAnswer">{{btntext}}</button>
			</view>

		</view>
		<!-- 星座匹配题 -->
		<view class="card" v-if="testtype=='constellation'">
			<view class="title">{{title}}</view>
			<view class="testdec">{{subject}}</view>
			<picker mode="selector" :range="constellationlist" :value="index1" @change="bindPickerChange1">
				<view class="selectbox">
					<view class="biaoti">男方星座：</view>
					<view class="menu">{{constellationlist[index1]}}</view>
					<image src="../../static/course.png"></image>
				</view>
			</picker>
			<picker mode="selector" :range="constellationlist" :value="index2" @change="bindPickerChange2">
				<view class="selectbox1">
					<view class="biaoti1">女方星座：</view>
					<view class="menu1">{{constellationlist[index2]}}</view>
					<image src="../../static/course1.png"></image>
				</view>
			</picker>
			<button style="background-color:  #c4f0ff;" @click="testConstellation">立即查询</button>
		</view>


		<!-- 	<view v-if="isDouyin">
			<Tip></Tip>
		</view> -->

		<Moretests :testlist="testlist" @toTest="toTest"></Moretests>
		<view class="copyright"> * 精选趣味测 *</view>

	</view>
</template>

<script>
	var videoAd = null;
	import Moretests from "../../component/Moretests";
	import Tip from "../../component/Tip";
	import API from "../../api.js";
	import md5 from 'js-md5';
	export default {
		data() {
			return {
				myname: "",
				hername: "",
				btntext: "立即测试",
				id: "5ece050bad7441004c08163d",
				title: "",
				describe: "",
				testimg: "",
				subject: '',
				inputpLaceholderA: "",
				inputpLaceholderB: "",
				boxesNumber: "",
				selectindex: 99,
				option: [],
				answer: [],
				isload: false,
				times: "",
				testtype: "",
				smimg: "",
				testlist: [],
				haveIuput: false,
				isDouyin: "",
				bgColor: "fe9f4d"

			}
		},
		components: {
			Moretests,
			Tip
		},
		onLoad(e) {
			var that = this;
			that.id = e.id;
			// console.log(that.id)
			this.getTest();
			this.getTestList();
			that.upDataTimes();
			that.douyin();
			uni.showLoading({
				title: '加载中'

			});

		},
		onShareAppMessage: function(shareOption) {
			let that = this;
			if (shareOption.from == 'button') { // 判断是按钮还是右上角分享
				return {
					channel: 'video', // 必写 video
					templateId: '11111111', // 分享的模版 id
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测评，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: '/pages/introduce/introduce?id=' + that.id, // 分享的路径
					extra: {
						videoTopics: ["个性格测", "心理测试", "趣味测试"] // 只有抖音才会有的属性
					},
				}
			} else { // 右上角分享
				return {
					templateId: '11111111', // 分享的模版 id
					title: "趣味测试，点击这里就能找到!", // 分享的标题
					desc: '趣味测评，为你的闲余生活加点乐趣。', // 分享的内容介绍
					path: '/pages/introduce/introduce?id=' + that.id, // 分享的路径
				}
			}
		},
		//#ifdef MP-WEIXIN
		onShareTimeline: function(res) {
			var that = this;
			return {
				title: that.title,
				imageUrl: that.testimg,
				query: {
					id: that.id
				}
			}
		},
		//#endif
		methods: {
			select: function(e) {
				// console.log(e)
				this.selectindex = e;
			},
			toTest: function(e) {
				console.log(e)
				let {
					id
				} = e;
				uni.navigateTo({
					url: "/pages/introduce/introduce?id=" + id
				})
			},
			douyin: function() {
				let appName = uni.getStorageSync("appName");
				var that = this;
				if (appName == "Douyin") {
					that.isDouyin = true
				} else {
					that.isDouyin = false
				}
			},
			getTest: function() {
				var that = this;
				uniCloud.callFunction({
					name: "getTest",
					data: {
						id: that.id
					}
				}).then(res => {
					// console.log(res.result.data[0])
					uni.hideLoading();
					that.isload = true;
					var testlist = res.result.data[0];
					that.title = testlist.title;
					that.option = testlist.option;
					that.testimg = testlist.testimg;
					that.describe = testlist.describe;
					that.subject = testlist.subject;
					that.answer = testlist.answer;
					that.times = testlist.times;
					that.haveIuput = testlist.haveIuput;
					that.smimg = testlist.smimg;
						that.testtype = testlist.testtype;
					that.boxesNumber = testlist.boxesNumber;
					that.inputpLaceholderA = testlist.inputpLaceholderA;
					that.inputpLaceholderB = testlist.inputpLaceholderB;
					that.bgColor = testlist.bgColor

				})
			},
			getTestList: function() {
				uniCloud.callFunction({
					name: "getTestList",
					data: {
						page: 0
					}
				}).then(res => {
					// console.log(res.result.data)
					this.testlist = res.result.data;
					this.isLoad = false;
				})
			},
			getAnswer: function() {
				var that = this;
				if (that.selectindex > that.option.length) {
					uni.showToast({
						title: "您还未选择你的答案",
						icon: "none"
					})
				} else {
					uni.reLaunch({
						url: "/pages/result/result?answer=" + that.answer[that.selectindex] + "&title=" + that.title + "&id=" + that.id +
							"&img=" + that.smimg
					})
				}
			},
			upDataTimes: function() {
				var that = this;
				uniCloud.callFunction({
					name: "upDataTimes",
					data: {
						id: that.id
					}
				})
			},
			testName: function() {
				var that = this;
				if (that.boxesNumber != "2") {
					if (that.myname == "" && that.hername == "") {
						uni.showToast({
							title: "姓名不能为空",
							icon: "none"
						})
					} else {
						let myname = md5(that.myname).replace(/[^0-9]/ig, "");
						let hername = md5(that.hername).replace(/[^0-9]/ig, "");
						let testId = that.id;
						uniCloud.callFunction({
							name: "testName",
							data: {
								myname: myname,
								hername: hername,
								testId: testId
							}
						}).then(res => {
							// console.log(res)
							let reslut = res.result.data[0];
							uni.reLaunch({
								url: "/pages/result/result?answer=" + reslut.answer + "&title=" + that.title + "&id=" + that.id +
									"&img=" + that.smimg
							})
						})
					}

				} else {
					if (that.myname == "" || that.hername == "") {
						uni.showToast({
							title: "姓名不能为空",
							icon: "none"
						})
					} else {
						let myname = md5(that.myname).replace(/[^0-9]/ig, "");
						let hername = md5(that.hername).replace(/[^0-9]/ig, "");
						let testId = that.id;
						uniCloud.callFunction({
							name: "testName",
							data: {
								myname: myname,
								hername: hername,
								testId: testId
							}
						}).then(res => {
							let reslut = res.result.data[0];
							// console.log(reslut)
							uni.reLaunch({
								url: "/pages/result/result?answer=" + reslut.answer + "&title=" + that.title + "&id=" + that.id +
									"&img=" + that.smimg
							})
						})
					}
				}
			},
			bindPickerChange1: function(e) {
			
				this.index1 = e.target.value
				console.log(this.index1)
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
				console.log(this.index2)
			},
			testConstellation: function() {
				var that = this;
				uniCloud.callFunction({
					name: "getConstellation",
					data: {
						male: this.index1,
						female: this.index2
					}
				}).then((res) => {
					console.log(res)
					let reslut = res.result.data[0];
					uni.reLaunch({
						url: "/pages/result/result?answer=" + reslut.answer + "&title=" + that.title + "&id=" + that.id +
							"&img=" + that.smimg
					})
				})
			},


		}
	}
</script>

<style lang="less">
	.img {
		width: 750rpx;
		position: relative;

	}

	.card {
		width: 615rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx;
		position: relative;
		margin: -100rpx 30rpx 50rpx 30rpx;
		z-index: 2;

		.title {
			text-align: center;
			font-weight: bold;
			font-size: 40rpx;
			margin-bottom: 10rpx;
		}

		.testdec {
			font-size: 30rpx;
			padding: 10rpx;
		}

		input {
			border: 2rpx solid #c4f0ff;
			padding: 20rpx;
			border-radius: 10rpx;
			margin: 20rpx 0;
		}

		button {
			border-radius: 30rpx;
			box-shadow: 0 0 10rpx #aa00ff;
			-webkit-animation: free_download 1s linear alternate infinite;
			animation: free_download 1s linear alternate infinite;
		}

		button::after {
			border: none;
		}

		@-webkit-keyframes free_download {
			0% {
				-webkit-transform: scale(0.9);
			}

			100% {
				-webkit-transform: scale(1);
			}
		}

		@keyframes free_download {
			0% {
				transform: scale(0.7);
			}

			100% {
				transform: scale(1);
			}
		}

	}

	.option {
		display: flex;
		line-height: 60rpx;
		margin: 20rpx 20rpx;

		.order {
			background-color: #838383;
			width: 60rpx;
			height: 60rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 50%;
			background-color: #4CD964;

		}

		.norder {
			background-color: #838383;
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			border-radius: 50%;
			color: #FFFFFF;
			margin-top: 5rpx;
		}

		text {
			width: 600rpx;
			margin-left: 20rpx;
			font-size: 25rpx;
		}
	}



	.copyright {
		text-align: center;
		font-size: 25rpx;
		padding: 20rpx 0;
		color: #8c8c8c;
	}
</style>
